<html>
<head>	
	<LINK href="./css/common.css" rel="stylesheet" type="text/css">
	<LINK href="./css/tutorial.css" rel="stylesheet" type="text/css">
	
	<!-- INCLUDE MOSHU'S LIBRARY-->
	<script type="text/javascript" src="Scripts/CanvasLib/dom-utils.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/canvas-extentions.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/shape.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/line.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/responsive-line.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/rect.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/responsive-rect.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/image.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/circle.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/arrow.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/text.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/irregular-shape.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/responsive-irregular-shape.js"></script>
	
	<script type="text/javascript" src="Scripts/CanvasLib/scene.js"></script>
	
	<script type="text/javascript" src="Scripts/CanvasLib/animation.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/draggable.js"></script>
	<!-- END MOSHU'S -->
	
	<!-- INCLUDE SNAKE'S LIBRARY-->
	<script type="text/javascript" src="Scripts/SceneEditor/Painters/painter.js"></script>
	<script type="text/javascript" src="Scripts/SceneEditor/Painters/irregular-shape-painter.js"></script>
	<script type="text/javascript" src="Scripts/SceneEditor/json3.js"></script>
	<script type="text/javascript" src="Scripts/SceneEditor/sceneEditor.js"></script>
	<script type="text/javascript" src="Scripts/Demos/snake.js"></script>
	<!-- END SNAKE'S -->
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js"></script>
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.min.js"></script>
	<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" />
</head>
<body>
	
	<div class="page">
		<div class="page-header ">
			<div class="title">
				<span>Moshu's Canvas Library - Snake</span>		
			</div>		
			<div class="menu"></div>			
		</div>
		<div class="page-content" style="overflow-y:scroll;">
			<div style="width:80%;margin-left:10%;margin-top:1%;margin-bottom:1%;text-align:center;">
				<canvas width="500" height="500" id="scene" style="border:2px solid black;"></canvas>
				<br>
				<div id="snake-levels">
				</div>
			</div>
		</div>
	</div>
	
	<div class="page-footer">
	</div>
	<script type="text/javascript">
		$( ".menu" ).load( "partials/menu.html" );
		$( ".page-footer" ).load( "partials/footer.html" );
		$(".resizable").resizable();
	</script>

<script type="text/javascript">
		var scene = new Scene("scene");
		scene.setBackgroundColor("beige");
		scene.setBackgroundImage("./images/img.jpg");
		var snake = new Snake(scene);	
		
		//debugger;
		snake.initialize();
		
		setTimeout(function(){		
			snake.start();			
			
			// show game levels
			var html ="Load level:";
			for(var i=0;i<snake.levels.length;i++){
				var level = snake.levels[i];
				html+="<input type='button' value='"+level.name+"' class='select-level'/>";
			}
			$("#snake-levels").html(html);
			setTimeout(function(){
				$('.select-level').click(function(){
					snake.initialize($(this).val());
				});
			},1);
		},1000);
</script>
</body>
</html>